<template>
	<div>
		<a-card :bordered="false">
			<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
				<a-row :gutter="24">
					<a-col :span="4">
						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
						<a-button style="margin: 0 8px" @click="reset">重置</a-button>
					</a-col>
				</a-row>
			</a-form>
			<s-table ref="tableRef" :columns="columns" :data="loadData" bordered rowKey="id" :scroll="{ x: 'max-content' }">
				<template #operator class="table-operator">
					<a-space>
						<a-button type="primary" @click="formRef.onOpen()">
							<template #icon>
								<plus-outlined />
							</template>
							新增
						</a-button>
					</a-space>
				</template>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'idCardImage'">
						<a-button v-if="record.idCardImage" type="link" @click="showImagePreview(record, 'idCardImage')"
							>查看图片
						</a-button>
						<span v-else>无</span>
					</template>
					<template v-else-if="column.dataIndex === 'bankImage'">
						<a-button v-if="record.bankImage" type="link" @click="showImagePreview(record, 'bankImage')"
							>查看图片
						</a-button>
						<span v-else>无</span>
					</template>
					<template v-else-if="column.dataIndex === 'creditReport'">
						<a-button v-if="record.creditReport" type="link" @click="showImagePreview(record, 'creditReport')"
							>查看图片
						</a-button>
						<span v-else>无</span>
					</template>
					<template v-else-if="column.dataIndex === 'noCrimeCert'">
						<a-button v-if="record.noCrimeCert" type="link" @click="showImagePreview(record, 'noCrimeCert')"
							>查看图片
						</a-button>
						<span v-else>无</span>
					</template>
					<template v-if="column.dataIndex === 'action'">
						<a-space>
							<a-button type="link" @click="educationRef.onOpen(record)">教育经历</a-button>
							<a-button type="link" @click="workRef.onOpen(record, 'scheduling')">工作经历</a-button>
						</a-space>
					</template>
				</template>
			</s-table>
		</a-card>

		<!-- 图片预览模态框 -->
		<a-modal
			v-model:open="previewVisible"
			:title="previewTitle"
			:footer="null"
			@cancel="handlePreviewCancel"
			width="800px"
		>
			<div class="image-preview-container">
				<div class="image-navigation" v-if="currentImages.length > 1">
					<a-button type="primary" @click="prevImage" :disabled="currentImageIndex <= 0"> 上一张 </a-button>
					<span class="image-counter">{{ currentImageIndex + 1 }} / {{ currentImages.length }}</span>
					<a-button type="primary" @click="nextImage" :disabled="currentImageIndex >= currentImages.length - 1">
						下一张
					</a-button>
				</div>
				<div class="image-wrapper">
					<img v-if="currentImageUrl" :src="currentImageUrl" alt="预览图片" class="preview-image" />
					<div v-else class="image-loading">图片加载中...</div>
				</div>
			</div>
		</a-modal>
		<Work ref="workRef" />
		<Education ref="educationRef" />
	</div>
</template>

<script setup name="RecruitmentProfile">
	import { computed, ref } from 'vue'
	import onboardingRegistryApi from '@/api/hrms/onboarding/registry/onboardingRegistryApi'
	import Work from '@/views/hrms/onboarding/registry/work.vue'
	import Education from '@/views/hrms/onboarding/registry/education.vue'

	const searchFormState = ref({
		current: 1,
		size: 10,
		candidateName: undefined,
		recommendedDepartment: undefined,
		resumeLevel: undefined,
		resumeSource: undefined
	})

	const tableRef = ref()
	const searchFormRef = ref()
	const formRef = ref()
	const workRef = ref()
	const educationRef = ref()
	const interviewRef = ref()

	// 图片预览相关
	const previewVisible = ref(false)
	const previewTitle = ref('图片预览')
	const currentImages = ref([])
	const currentImageIndex = ref(0)
	const currentImageType = ref('')
	const jdOssBaseUrl = 'https://s3.cn-north-1.jdcloud-oss.com/'

	const columns = [
		{ title: '姓名', dataIndex: 'fullName' },
		{ title: '身份证号', dataIndex: 'idCard' },
		{ title: '性别', dataIndex: 'gender' },
		{ title: '出生日期', dataIndex: 'birthDate' },
		{ title: '民族', dataIndex: 'ethnicity' },
		{ title: '政治面貌', dataIndex: 'politicalStatus' },
		{ title: '籍贯', dataIndex: 'nativePlace' },
		{ title: '婚姻状况', dataIndex: 'maritalStatus' },
		{ title: '身份证照片', dataIndex: 'idCardImage' },
		{ title: '手机号码', dataIndex: 'phone' },
		{ title: '电子邮箱', dataIndex: 'email' },
		{ title: '现住址', dataIndex: 'nowAddress' },
		{ title: '紧急联系人', dataIndex: 'emergencyContact' },
		{ title: '紧急联系人关系', dataIndex: 'emergencyRelation' },
		{ title: '紧急联系电话', dataIndex: 'emergencyPhone' },
		{ title: '开户银行', dataIndex: 'bankName' },
		{ title: '银行账号', dataIndex: 'bankAccount' },
		{ title: '银行卡照片', dataIndex: 'bankImage' },
		{ title: '无犯罪记录证明', dataIndex: 'noCrimeCert' },
		{ title: '征信报告', dataIndex: 'creditReport' },
		{ title: '表单状态', dataIndex: 'formStatus' },
		{ title: '操作', dataIndex: 'action', align: 'center', width: 200, fixed: 'right' }
	]

	// 计算当前图片URL
	const currentImageUrl = computed(() => {
		if (currentImages.value.length > 0 && currentImageIndex.value < currentImages.value.length) {
			return `${jdOssBaseUrl}${currentImages.value[currentImageIndex.value]}`
		}
		return ''
	})

	// 加载数据
	const loadData = async (params) => {
		return await onboardingRegistryApi.pageList(searchFormState.value)
	}

	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}

	const showImagePreview = (record, imageType) => {
		let imageField = ''
		let title = ''
		switch (imageType) {
			case 'idCardImage':
				imageField = record.idCardImage
				title = `身份证照片预览 (${record.fullName})`
				break
			case 'bankImage':
				imageField = record.bankImage
				title = `银行卡照片预览 (${record.fullName})`
				break
			case 'noCrimeCert':
				imageField = record.noCrimeCert
				title = `无犯罪记录证明预览 (${record.fullName})`
				break
			case 'creditReport':
				imageField = record.creditReport
				title = `征信报告预览 (${record.fullName})`
				break
		}
		if (imageField) {
			// 分割逗号分隔的图片文件名
			currentImages.value = imageField.split(',').filter((item) => item.trim() !== '')
			currentImageIndex.value = 0
			currentImageType.value = imageType
			previewTitle.value = title
			previewVisible.value = true
		}
	}

	// 关闭预览
	const handlePreviewCancel = () => {
		previewVisible.value = false
		currentImages.value = []
		currentImageIndex.value = 0
		currentImageType.value = ''
	}

	// 上一张图片
	const prevImage = () => {
		if (currentImageIndex.value > 0) {
			currentImageIndex.value--
		}
	}

	// 下一张图片
	const nextImage = () => {
		if (currentImageIndex.value < currentImages.value.length - 1) {
			currentImageIndex.value++
		}
	}
</script>

<style scoped>
	.ant-advanced-search-form {
		margin-bottom: 16px;
	}

	.image-preview-container {
		text-align: center;
	}

	.image-navigation {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.image-counter {
		font-size: 16px;
		font-weight: bold;
	}

	.image-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 400px;
	}

	.preview-image {
		max-width: 100%;
		max-height: 70vh;
		object-fit: contain;
	}

	.image-loading {
		font-size: 16px;
		color: #999;
	}
</style>
